<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>JQuery 02 - Document on</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="script/jquery-1.11.0.min.js"></script>
        <script>
            //on - parámetros: evento y función
            $(document).on('ready', function(){
                $('#div01').text('Acá le meto un texto<p>A ver</p>');
                $('#div02').html('<p>Esto es con un html</p>');
                
                $('#boton1').on('click', function(){
                    $('.class01').text('Se cambiaron los class01');
                });
        
            });
            

        </script>
        
        <style>
            .class01{
                background-color: blue;
            }
            .class02{
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div id="div01" class="class01">
        </div>
        
        <div id="div02" class="class01">
        </div>
        
        <button id="boton1">Cambiar div</button>
        
        <div id="div03" class="class02">
            <p>
                Este es el DIV con id div03. Clase 02
            </p>
        </div>
        
        <div class="class01 class02">
            <cite>
                Esto es el div es de class01 y class02 
            </cite>
        </div>
        
        <button id="boton2">cambia class 02</button>
    </body>
</html>
